//点击业内连接会跳到不同的页面，但是要做一个动画过去
window.onload = function  () {

	//定义一个全局变量，记录当前页面的位置
	var index = 1;
	//整体页面
	var list = $(".list");

	var flag = true;

	/**
	 * 获取页面的left值
	 */ 
	function getLeft () {
		var list = $('.list');
		return list.offsetLeft;
	}

	/**
	 * 监听鼠标滚动事件，使页面可以左右滚动
	 */
	function rollPage () {
		document.onmousewheel = function  (e) {
			document.onmousewheel = null;
			toPage (e);
		}


	}

	function toPage (e, fn) {

		//往上滚是120，往下滚是-120
		var delta = e.wheelDelta;
		if (delta > 0) {

			//返回上一页
			//如果index大于为1，就把index值减一，并把页面滚动到上一页
			if (index > 1) {
				index--;
				page.previous();
			}
		} else {

			//进入下一页
			if (index >= 6) {
				index = 5;
			}

			index++;
			page.next();
		}
		displayCorrpage ();

		setTimeout(function(){
			rollPage ();
		}, 300);
	}

	var page = {

		width: document.body.offsetWidth,

		previous: function  () {
			startMove(list, {"left": -(index-1) * this.width} );  
			// list.style.left = -(index-1) * this.width+ 'px';
		},

		next: function  () {
			startMove(list, {"left": -(index-1) * this.width} );
			// list.style.left = -(index-1) * this.width + 'px';
		}
	}

	//返回上一页
	function backPrePage () {
		var back = $$(".png0");

		for (var i = 0; i < back.length; i++) {
			back[i].onclick = function  () {
				index=1;
			    list.style.left = -(index-1) * document.body.offsetWidth + 'px';
			}
		}
	}

	//小伙伴的弹幕效果
	function barrage () {
		var partner = $$(".man-box"),
			barrage = $(".barrage");

		//初始一个高度值
		for (var i = 0; i < partner.length; i++) {
			partner[i].style.top = Math.random()*(barrage.offsetHeight)+ "px";
			partner[i].style.left = Math.random()*(barrage.offsetWidth)+ "px";
		}
	}

	/**
	 * 11对应灰白
	 * 12对应蓝色
	 * 13对应蓝白
	 * 14对应灰色
	 */

	/**
	 * 恢复到原始灰色的图标
	 */
	function recovery () {

		//获取到所有的图标字体把颜色都改为灰色
		var png = $$(".png");
		for (var i = 0, len = png.length; i < len; i++) {
			console.log(i+": img/"+(i%5+1)+"4.png")
			png[i].setAttribute("src", "img/"+(i%5+1)+"4.png")
		}
	}

	//点击链接，回到对应页面,图标变为对应颜色
	function goCorrentPage () {
		var pro = $$(".to-pro"),
			blog = $$(".to-blog"),
			par = $$(".to-par"),
			fq = $$(".to-fq"),
			follow = $$(".to-follow");

		for (var i = 0; i < pro.length; i++) {

			pro[i].onclick = function  () {
				index = 2;
				list.style.left = -(index-1) * document.body.offsetWidth + 'px';

				//left值变了，然后对应页面的图标变色
				goLinkPage();
			}

			blog[i].onclick = function  () {
				index = 3;
				list.style.left = -(index-1) * document.body.offsetWidth + 'px';
				goLinkPage();	
			}

			par[i].onclick = function  () {
				index = 4;
				list.style.left = -(index-1) * document.body.offsetWidth + 'px';	
				goLinkPage();
			}

			fq[i].onclick = function  () {
				index = 5;
				list.style.left = -(index-1) * document.body.offsetWidth + 'px';
				goLinkPage();
			}

			follow[i].onclick = function  () {
				index = 6;
				list.style.left = -(index-1) * document.body.offsetWidth + 'px';
				goLinkPage();
			}
		}
		
	}

	//首页点击链接，进入对应页面图标进行变化
	function goLinkPage () {
		var png1 = $("#targetLink1"),
			png2 = $("#targetLink2"),
			png3 = $("#targetLink3"), 
			png4 = $("#targetLink4"),
			png5 = $("#targetLink5");

		png1.setAttribute("src", "img/"+(index-1)+"2.png");
		png1.nextSibling.style.visibility = "hidden";

		png2.setAttribute("src", "img/"+(index-1)+"2.png");
		png2.nextSibling.style.visibility = "hidden";

		png3.setAttribute("src", "img/"+(index-1)+"2.png");
		png3.nextSibling.style.visibility = "hidden";

		png4.setAttribute("src", "img/"+(index-1)+"2.png");
		png4.nextSibling.style.visibility = "hidden";

		png5.setAttribute("src", "img/"+(index-1)+"2.png");
		png5.nextSibling.style.visibility = "hidden";
	}

	//判断是不是产品
	function iconPro (ele) {
		if (index == 2) {
			ele.setAttribute("src", "img/12.png");
			ele.nextSibling.style.visibility = "hidden"; 
		} else {
			ele.setAttribute("src", "img/14.png");
			ele.nextSibling.style.visibility = "";
		}

		ele.onmouseover = function  () {
			if (index == 2) {
			    ele.setAttribute("src", "img/13.png");
			} else {
				ele.setAttribute("src", "img/11.png");
			}
		}
		ele.onmouseout = function  () {
			if (index == 2) {
			    ele.setAttribute("src", "img/12.png");
			} else {
				ele.setAttribute("src", "img/14.png");
			}
		}

		ele.onclick = function  () {
			recovery ();
			ele.setAttribute("src", "img/12.png");
			textChange ();
			ele.nextSibling.style.visibility = "hidden";
		}


	}

	//是不是博文
	function iconBlog (ele) {
		if (index == 3) {
			ele.setAttribute("src", "img/22.png");
			ele.nextSibling.style.visibility = "hidden"; 
		} else {
			ele.setAttribute("src", "img/24.png");
			ele.nextSibling.style.visibility = "";
		}

		ele.onmouseover = function  () {
			if (index == 3) {
			    ele.setAttribute("src", "img/23.png");
			} else {
				ele.setAttribute("src", "img/21.png");
			}
		}
		ele.onmouseout = function  () {
			if (index == 3) {
			    ele.setAttribute("src", "img/22.png");
			} else {
				ele.setAttribute("src", "img/24.png");
			}
		}

		ele.onclick = function  () {
			recovery ();
			ele.setAttribute("src", "img/23.png");
			textChange ();
			ele.nextSibling.style.visibility = "hidden";

		}

	}


	//判断是不是小伙伴
	function iconPar (ele) {
		if (index == 4) {
			ele.setAttribute("src", "img/32.png");
			ele.nextSibling.style.visibility = "hidden"; 
		} else {
			ele.setAttribute("src", "img/34.png");
			ele.nextSibling.style.visibility = "";
		}

		ele.onmouseover = function  () {
			if (index == 4) {
			    ele.setAttribute("src", "img/33.png");
			} else {
				ele.setAttribute("src", "img/31.png");
			}
		}
		ele.onmouseout = function  () {
			if (index == 4) {
			    ele.setAttribute("src", "img/32.png");
			} else {
				ele.setAttribute("src", "img/34.png");
			}
		}

		ele.onclick = function  () {
			recovery ();
			ele.setAttribute("src", "img/33.png");
			textChange ();
			ele.nextSibling.style.visibility = "hidden";
		}

	}

	//判断是不是问题
	function iconQues (ele) {
		if (index == 5) {
			ele.setAttribute("src", "img/42.png");
			ele.nextSibling.style.visibility = "hidden"; 
		} else {
			ele.setAttribute("src", "img/44.png");
			ele.nextSibling.style.visibility = "";
		}

		ele.onmouseover = function  () {
			if (index == 5) {
			    ele.setAttribute("src", "img/43.png");
			} else {
				ele.setAttribute("src", "img/41.png");
			}
		}
		ele.onmouseout = function  () {
			if (index == 5) {
			    ele.setAttribute("src", "img/42.png");
			} else {
				ele.setAttribute("src", "img/44.png");
			}
		}

		ele.onclick = function  () {
			recovery ();
			ele.setAttribute("src", "img/43.png");
			textChange ();
			ele.nextSibling.style.visibility = "hidden";
		}

	}

	//判断是不是关注我们
	function iconFollow (ele) {
		if (index == 6) {
			ele.setAttribute("src", "img/52.png");
			ele.nextSibling.style.visibility = "hidden"; 
		} else {
			ele.setAttribute("src", "img/54.png");
			ele.nextSibling.style.visibility = "";
		}

		ele.onmouseover = function  () {
			if (index == 6) {
			    ele.setAttribute("src", "img/53.png");
			} else {
				ele.setAttribute("src", "img/51.png");
			}
		}
		ele.onmouseout = function  () {
			if (index == 6) {
			    ele.setAttribute("src", "img/52.png");
			} else {
				ele.setAttribute("src", "img/54.png");
			}
		}

		ele.onclick = function  () {
			recovery ();
			ele.setAttribute("src", "img/53.png");
			textChange ();
			log(ele.nextSibling.nodeName);
			ele.nextSibling.style.visibility = "hidden"; 
			log(ele.nextSibling.innerHTML); 
		}
	}

	//所有底下文字都显示
	function textChange () {

		//现在根据第几页使那个图片显示那个
		var png1 = $$(".png1"),
			png2 = $$(".png2"),
			png3 = $$(".png3"),
			png4 = $$(".png4"),
			png5 = $$(".png5");

		for (var i = 0, len = png1.length; i < len; i++) {
			png1[i].nextSibling.style.visibility = "";
			png2[i].nextSibling.style.visibility = "";
			png3[i].nextSibling.style.visibility = "";
			png4[i].nextSibling.style.visibility = "";
			png5[i].nextSibling.style.visibility = "";
		}
	}

	function  resize () {
		window.location.reload();
	}


	function displayCorrpage () {

		//现在根据第几页使那个图片显示那个
		var png1 = $$(".png1"),
			png2 = $$(".png2"),
			png3 = $$(".png3"),
			png4 = $$(".png4"),
			png5 = $$(".png5");

		for (var i = 0, len = png1.length; i < len; i++) {
			iconPro (png1[i]);
			iconBlog(png2[i]);
			iconPar(png3[i]);
			iconQues(png4[i]);
			iconFollow(png5[i]);
		}
	}

	function init () {

		//鼠标滚动
		rollPage ();	

		//点击返回，就到上一页
		backPrePage ();

		//点击链接，回到对应页面
		goCorrentPage ();

		//第二页的放大特效
		zoom ();

		//第二页的文字移入特效
		fontMoveIn ();

		//弹幕特效
		 barrage ()

		 //测试函数
		 displayCorrpage();

		 //页面在改变大小的时候大小也要随着变
		 window.onresize = resize;
	}

	// recovery ()
	init();
};